Reactの環境変数をdotenv-cliで切り替えてみた

ReactアプリをCreate React Appで作成した場合、予めdotenvという環境変数をファイルで定義するパッケージがインストールされています。また、npm startやnpm run buildコマンドにより読み込む環境変数の定義ファイルを切り替えることが出来ます。しかし、ビルド時に特定のファイルを指定することは出来ませんでした。

検証環境や本番環境など複数の環境をデプロイする際、ビルド時に環境変数を切り替えたいので、dotenv-cliを使ってみることにしました。

環境

項目	内容
OS	macOS Catalina 10.15.5（19F101）
Node.js	12.13.1
TypeScript	3.7.2
React	16.13.1
dotenv-cli	3.2.0

dotenv-cliを導入

dotenv-cliのパッケージをインストールして利用してみます。

dotenv-cliをインストール

dotenv-cliのパッケージをインストールします。

npm install --save-dev dotenv-cli

環境変数のファイルを作成

プロジェクトのルートディレクトリに環境変数を定義するためのファイルを作成します。

├ .env                # ローカル環境
├ .env.development    # 開発環境
├ .env.staging        # 検証環境
├ .env.production     # 本番環境

各ファイルで環境変数を定義します。

REACT_APP_API_ENDPOINT=https://dev.example.com/v1/

REACT_APP_API_ENDPOINT=https://dev.example.com/v1/

REACT_APP_API_ENDPOINT=https://stg.example.com/v1/

REACT_APP_API_ENDPOINT=https://example.com/v1/

※Reactで環境変数を使用する場合、環境変数名の先頭にREACT_APP_を付ける必要があります。

スクリプトを実装

package.jsonでビルド用のスクリプトを実装します。

  "scripts": {
    "start": "react-scripts start",
    "build-development": "dotenv -e .env.development react-scripts build",
    "build-staging": "dotenv -e .env.staging react-scripts build",
    "build-production": "dotenv -e .env.production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Reactで環境変数を使う

先ほど定義した環境変数をprocess.envから取り出します。

const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT!;
console.log(API_ENDPOINT);

ビルドを実行してみる

検証環境にデプロイするファイルをビルドしてみます。

npm run build-staging

デプロイしてページを表示すると、ブラウザの開発ツールのコンソールにhttps://stg.example.com/v1/が出力されました。

まとめ

dotenv-cliを使うことでビルド時に環境変数の定義ファイルを指定することが出来ました。特にソースコードの変更も必要ないので、導入が簡単で使い勝手も良いです。

おすすめ記事

参考資料

• entropitor/dotenv-cli: A cli to load dotenv files